<template>
  <div class="login">
    <div class="login-container">
      <h3>登陆</h3>
      <el-form label-position="left" :rules="rules" label-width="0px" :model="loginForm" ref="loginForm">
        <el-form-item prop="idNumber">
          <el-input type="text" placeholder="账号" v-model="loginForm.idNumber"></el-input>
        </el-form-item>

        <el-form-item prop="password">
          <el-input type="password" placeholder="密码" v-model="loginForm.password"></el-input>
        </el-form-item>

        <el-form-item>
          <el-radio-group v-model="loginForm.role">
            <el-radio label="student">学生</el-radio>
            <el-radio label="teacher">教师</el-radio>
            <el-radio label="admin">管理员</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item style="width: 100%">
          <el-button style="width: 150px;float: right" type="primary" @click="login('loginForm')">登陆</el-button>
        </el-form-item>
      </el-form>


    </div>
  </div>

</template>

<script>
import { loginApi } from "@/api/LoginApi";

export default {
  name: "Login",
  data() {
    return {
      dialogFormVisible: false,
      loginForm: {
        idNumber: '',
        password: '',
        role: 'student',
      },
      rules: {
        idNumber: [{required: true, message: '请输入用户名', trigger: 'blur'}],
        password: [{required: true, message: '请输入密码', trigger: 'blur'}]
      },
    }
  },
  methods: {
    login(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$store.commit('SET_ROLES', this.loginForm.roles)
          loginApi(this.loginForm).then(res => {
            if (res.code === 200) {
              this.$store.commit('SET_USERINFO', res.data)
              this.$store.commit('SET_TOKEN', res.data.token)
              this.$store.commit("SET_ROLES", res.data.role)
              let role = localStorage.getItem("roles");
              if (role === "student") {
                this.$router.push("/student/select_topic")
              } else if (role === "teacher") {
                this.$router.push("/teacher/publish_topic")
              } else if (role === "admin") {
                this.$router.push("/admin/index")
              }
              this.$message.success("登录成功")
            }
          })
        } else {
          this.$message.error("请输入账号密码")
        }
      })
    }
  }
}
</script>

<style scoped>

.login {
  background-position: center;
  width: 100%;
  /*background-color: #D9AFD9;*/
  /*background-image: linear-gradient(60deg, #D9AFD9 0%, #97D9E1 100%);*/
  background-size: cover;
  /*position: fixed;*/
  height: 100%;
  min-width: 1000px;
}

.login-container {

  border-radius: 15px;
  background-clip: padding-box;
  margin: 90px auto;
  padding: 35px 35px 15px 35px;
  width: 350px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}

h3 {
  margin: 0 auto 40px auto;
  height: 30px;
  text-align: center;
  collapse: #505458;
}

</style>
